{% extends 'base.html' %}
{% block style %}
{% endblock %}

{% block content %}
    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">
            <div class="col-sm-6 col-xl-3">
                <div class="bg-secondary rounded d-flex align-items-center justify-content-between p-4">
                    <i class="fa fa-chart-line fa-3x text-primary"></i>
                    <div class="ms-3">
                        <p class="mb-2">登记核酸人数</p>
                        <h6 class="mb-0">{{ person_num_total }}</h6>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-3">
                <div class="bg-secondary rounded d-flex align-items-center justify-content-between p-4">
                    <i class="fa fa-chart-bar fa-3x text-primary"></i>
                    <div class="ms-3">
                        <p class="mb-2">阳性人数</p>
                        <h6 class="mb-0">{{ h_person_num }}</h6>
                    </div>
                </div>
            </div>
             <div class="col-sm-6 col-xl-3">
                <div class="bg-secondary rounded d-flex align-items-center justify-content-between p-4">
                    <i class="fa fa-chart-pie fa-3x text-primary"></i>
                    <div class="ms-3">
                        <p class="mb-2">核酸机构数量</p>
                        <h6 class="mb-0">{{ jigou_num_total }}</h6>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-3">
                <div class="bg-secondary rounded d-flex align-items-center justify-content-between p-4">
                    <i class="fa fa-chart-area fa-3x text-primary"></i>
                    <div class="ms-3">
                        <p class="mb-2">当前日期</p>
                        <h6 class="mb-0">{{ date }} </h6>
                    </div>
                </div>
            </div>
           
        </div>
    </div>
    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">
            <div class="col-sm-12 col-xl-6">
                <div class="bg-secondary text-center rounded p-4">
                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <img src="../static/image/1.jpg" style="width:750px;height: 500px">

                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-xl-6">
                <div class="bg-secondary text-center rounded p-4">
                    <div class="d-flex align-items-center justify-content-between mb-4">
                      <img src="../static/image/2.jpg" >

                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="../static/js/chart.min.js" type="text/javascript"></script>
    <script src="../static/js/easing.min.js" type="text/javascript"></script>
<script src="../static/js/bootstrap.bundle.min.js" type="text/javascript"></script>

    <script src="../static/js/waypoints.min.js" type="text/javascript"></script>
<script src="../static/js/owl.carousel.min.js" type="text/javascript"></script>
<script src="../static/js/moment.min.js" type="text/javascript"></script>
<script src="../static/js/moment-timezone.min.js" type="text/javascript"></script>
<script src="../static/js/tempusdominus-bootstrap-4.min.js" type="text/javascript"></script>
{% endblock %}